<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/public :: #public_head"></head>
<body>
<header th:replace="/public :: #public_header"></header>
<section th:replace="/public :: #public_time"></section>
<!---->
<section class="publicMian ">
  <div class="left" th:replace="/public :: #public_left"></div>
  <div class="right">
    <div class="location">
      <strong>你现在所在的位置是:</strong>
      <span>密码修改</span>
    </div>
    <div class="userPwdUpdate">
      <form id="pwdForm" th:action="@{/user/pwd}" th:method="post">
        <div>
          <label for="oldPassword">原密码：</label>
          <input type="password" id="oldPassword" autofocus="autofocus" required/>
          <span id="pwdText">*请输入原密码</span>
        </div>
        <div>
          <label for="newPassword">新密码：</label>
          <input type="password" id="newPassword" name="password" required/>
          <span class="pwdText">*请输入新密码</span>
        </div>
        <div>
          <label for="reNewPassword">确认新密码：</label>
          <input type="password" id="reNewPassword" required/>
          <span class="pwdText" id="reNewPwdText">*请再次输入新密码</span>
        </div>
        <div class="providerUpdateBtn">
          <input type="button" value="确认" id="save"/>
          <input type="button" value="返回" onclick="history.back(-1)"/>
        </div>
      </form>
    </div>
  </div>
</section>
<footer th:replace="/public::#public_footer"></footer>
<script type="application/javascript" th:inline="javascript">
  $(function (){
    let isCheck = false

    $('#oldPassword').blur(function () {
      var oldPassword = $(this).val().trim();
      if (!oldPassword){
        $('#pwdText').css('color','red')
        isCheck =false
        return
      }
      //theymeleaf行内表达式
      var url = [[@{/user/pwd/}]] + oldPassword;
      $.ajax({
        url:url,
        dataType:'json',
        method:'GET',
        success: function (data) {
          isCheck = data
          data ? $('#pwdText').replaceWith("<span id='pwdText'>*原密码正确</span>")
                  :$('#pwdText').replaceWith("<span id='pwdText' style='color: red'>*原密码错误</span>")
        },
        error:function () {
          $('#pwdText').html("校验原密码异常");
          isCheck = false;
        }
      })
    })
    $("#save").click(function () {
      if(isCheck) {
        if($("#newPassword").val() && $("#reNewPassword").val()
                && $("#newPassword").val() == $("#reNewPassword").val()) {
          $("#pwdForm").submit();
        }else{
          $("#reNewPwdText").replaceWith("<span id='reNewPwdText' style='color: red'>*保证和新密码一致</span>");
        }
      }

    })
  })
</script>
</body>
</html>